<template>
  <div>
    <!-- 搜索框 -->
<!--    <div class="search-bar">-->
<!--      <el-input-->
<!--        placeholder="请输入商品名称"-->
<!--        v-model="searchText"-->
<!--        suffix-icon="el-icon-search"-->
<!--      ></el-input>-->
<!--      <el-button type="primary" @click="search">搜索</el-button>-->
<!--    </div>-->
    <!-- 轮播图 -->
    <div class="carousel">
      <van-swipe :autoplay="5000">
        <van-swipe-item v-for="(image, index) in carouselImages" :key="index">
          <img :src="image" class="carousel-image"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品分类 -->
    <div class="category-items">
      <van-row>
        <van-col v-for="(category, index) in categories" :key="index" span="6" @click="tiaozhuan()">
          <div class="category-item">
            <img :src="category.photo" alt="" width="50px" height="50px"/>
            <p>{{ category.name }}</p>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 推荐商品 -->
    <div class="recommended-products">
      <h2>推荐商品</h2>
      <el-row :gutter="20">
        <el-col v-for="product in products" :key="product.id" :span="8">
          <div class="product-item" @click="cun(product.id)">
            <img :src="product.photo" alt="商品图片"/>
            <p>{{ product.comname }}</p>
            <p>¥{{ product.price }}</p>
          </div>
        </el-col>
      </el-row>


    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o" @click="tiaozhuan1">首页</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">商城</van-tabbar-item>
      <van-tabbar-item name="friends" icon="setting-o" @click="tiaozhuan3">购物车</van-tabbar-item>
      <van-tabbar-item name="setting" icon="friends-o" @click="tiaozhuan4">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'ProductPage',
  data() {
    return {
      active: 'search',
      searchText: '',
      carouselImages: [
        'https://leadnews-img.oss-cn-beijing.aliyuncs.com/jyyx/2024/12/17/318c8a5583d941be8fcc6a28eb1df304.png',
        'https://leadnews-img.oss-cn-beijing.aliyuncs.com/jyyx/2024/12/17/318c8a5583d941be8fcc6a28eb1df304.png',
        'https://leadnews-img.oss-cn-beijing.aliyuncs.com/jyyx/2024/12/17/318c8a5583d941be8fcc6a28eb1df304.png'
      ],
      categories: [],
      products: [],
      form: {},
    }
  },
  methods: {
    search() {
      // 这里可以添加搜索逻辑
      console.log('搜索关键词:', this.searchText)
    },
    tiaozhuan() {
      this.$router.push('/Classify')
    },
    show1() {
      axios.post('/home/homeshow').then(res => {
        this.categories = res.data.data
      })
    },
    show2() {
      axios.post('/commodity/commodityshow',this.form).then(res => {
        this.products = res.data.data
      })
    },
    cun(id) {
      this.$router.push('/Bustails')
      localStorage.setItem('id', id)
    },
    tiaozhuan1(){
      this.$router.push('/shouyei')
    },
    tiaozhuan2(){
      this.$router.push('/Home')
    },
    tiaozhuan3(){
      this.$router.push('/Shoppingcart')
    },
    tiaozhuan4(){
      this.$router.push('/Personal')
    }
  },
  mounted() {
    this.show1()
    this.show2()

  }
}
</script>

<style scoped>
.carousel {
  margin-bottom: 20px;
}

.carousel-image {
  width: 100%;
  height: auto; /* 适应高度 */
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.category-items {
  margin-bottom: 20px;
}

.category-item {
  text-align: center;
}

.recommended-products {
  padding: 20px;
}

.product-item {
  text-align: center;
  background-color: #f5f5f5; /* 背景色 */
  border-radius: 10px; /* 圆角 */
  padding: 10px;
}

.product-item img {
  max-width: 100%; /* 图片适应宽度 */
  height: auto; /* 保持比例 */
}
</style>
